import { useRef } from "react";
import { Card, Param, Percent } from "../components/Components";
import styles from "../styles/Multi.module.css";
import { connect, stop } from "./gzUtil";

export default function Multi() {
  const gzDiv = useRef<HTMLDivElement>(null);
  return (
    <div className={styles.grid}>
      <div style={{ gridColumn: "1 / 7", gridRow: "1" }}>
        <Card title="参数">
          <div>
            <Param name="ROS_MASTER_URI" value="http://localhost:11311" />
            <Param name="ROS_VERSION" value="melodic" />
            <div style={{ display: "flex", justifyContent: "space-evenly" }}>
              <Percent title="CPU利用率" value={90}></Percent>
              <Percent title="内存占用" value={70}></Percent>
            </div>
          </div>
        </Card>
      </div>
      <div style={{ gridColumn: "7 / 19" }} ref={gzDiv}></div>
      <div>
        <button onClick={connect(gzDiv.current!)}>连接</button>
        <button onClick={stop(gzDiv.current!)}>停止</button>
      </div>
    </div>
  );
}
